<template>
  <view class="container screen-width">
    <view class="company-banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in detailInfo.achievementsImages" :key="index">
          <img v-lazy="$imgUrl + item" />
        </van-swipe-item>
      </van-swipe>
    </view>
    <view class="name">{{detailInfo.achievementsName}}</view>
    <view class="content">
      <view class="content-info" v-html="detailInfo.achievementsContent"></view>
    </view>
    <view class="company-person">
      <view class="card-content">
        <view class="list">
          <view class="flex item items-middle">
            <img src="../../static/company/contact_icon.png" />
            <view class="lable">联 系 人 ：</view>
            <view class="lable-content">{{ detailInfo.achievementsContacts || '--' }}</view>
          </view>
          <view class="flex item items-middle">
            <img src="../../static/company/phone_icon.png" />
            <view class="lable">联系电话：</view>
            <view class="lable-content">{{ detailInfo.achievementsPhoneNumber || '--' }}</view>
          </view>
          <view class="flex item items-middle">
            <img src="../../static/company/address_icon.png" />
            <view class="lable">成果来源：</view>
            <view class="lable-content">{{ detailInfo.achievementsSource || '--' }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-box">
      <view class="publish" @click="toAdd">发布科技成果</view>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
import { achievementsDetail } from "../../util/api/result.js";
import { isWeixin, wxShareConfig } from "../../util/wx.js";
export default {
  data() {
    return {
      id: "",
      detailInfo: {}
    };
  },

  onLoad(e) {
    this.id = e.id;
  },
  mounted() {
    this.getDetail();
  },
  //方法集合
  methods: {
    getDetail() {
      achievementsDetail({ id: this.id }).then(res => {
        this.detailInfo = res.result;
        if (isWeixin()) {
          this.initShareConfig();
        }
      });
    },
    toAdd() {
      let token = this.$getToken();
      if (!token) {
        uni.showToast({
          title: "您还没有登录，请登录后操作",
          duration: 2000,
          icon: "none"
        });
        setTimeout(() => {
          uni.setStorageSync("pageUrl", window.location.href);
          uni.navigateTo({
            url: "/pages/login/index"
          });
        }, 2000);
        return;
      }
      uni.redirectTo({
        url: `/pages/result/achievAdd`
      });
    },
    initShareConfig() {
      let _this = this;
      let windowurl = window.location.href.split("#")[0];
      uni.request({
        url: "https://oldm.51bmj.cn/WeiXin/GetClientSign", //仅为示例，并非真实接口地址。
        data: {
          rawUrl: windowurl
        },
        dataType: "json",
        header: {
          "X-Requested-With": "XMLHttpRequest"
        },
        method: "GET",
        success: res => {
          if (res.statusCode == 200) {
            let { data } = res;
            let shareInfo = {
              title: "科技成果",
              desc: _this.detailInfo.achievementsName,
              link: window.location.href
            };
            wxShareConfig(this.$wx, data, shareInfo);
          }
        }
      });
    }
  }
};
</script>
<style>
body {
  user-select: text;
}
</style>
<style lang="scss" scoped>
.container {
  width: 100%;
  .name {
    padding: 30rpx 30rpx 10rpx 30rpx;
    font-size: 20px;
    color: #333;
    font-weight: 700;
  }
  .company-person {
    width: 100%;

    .create-card {
      width: 100%;
      height: 300upx;
      background: #dee4f0;
      display: flex;
      align-items: center;
      justify-content: center;

      .create-btn {
        background: #1678ff;
        color: #ffffff;
        padding: 10px 30px;
      }
    }

    .card-content {
      width: 100%;

      .list {
        width: 90%;
        background: #ffffff;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0px 1px 7px 0px rgba(132, 202, 187, 0.3);
        border-radius: 5px;
        margin: 20px auto;

        .item {
          margin-bottom: 10px;

          .name {
            font-size: 18px;
            font-weight: 700;
            color: #333333;
            margin-right: 10px;
          }

          .post {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
          }

          img {
            width: 16px;
            height: 16px;
          }

          .lable {
            font-size: 16px;
            font-weight: 400;
            color: #999999;
            margin: 0 10px;
          }

          .lable-content {
            font-size: 16px;
            font-weight: 400;
            color: #333333;
          }
        }
        .item:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  .btn-box {
    width: 100%;
    margin-top: 100rpx;
    .publish {
      background: #1678ff;
      color: #ffffff;
      padding: 10px 30px;
      text-align: center;
      width: 50%;
      margin: 0 auto;
    }
  }
  .content {
    padding: 20rpx 30rpx;
    user-select: text;
    box-sizing: border-box;
    overflow: scroll;
    .content-info {
      // min-height: 626rpx;
      user-select: text;
      font-size: 16px;
    }
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 200px;
  text-align: center;

  img {
    width: 100%;
    height: 200px;
  }
}
</style>